<template>
  <view class="register-page">
    
  </view>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'RegisterPage',
  data() {
    return {
      currentStep: 1,
      registerForm: {
        username: '',
        password: '',
        confirmPassword: '',
        phone: '',
        verifyCode: '',
        userType: 1 // 1: 求职者, 2: 招聘者
      },
      showPassword: false,
      agreedToTerms: false,
      isLoading: false,
      
      // 验证错误信息
      usernameError: '',
      passwordError: '',
      confirmPasswordError: '',
      phoneError: '',
      
      // 验证码相关
      verifyCountdown: 0,
      verifyTimer: null
    }
  },
  computed: {
    canNextStep1() {
      return this.registerForm.username.length >= 3 && 
             this.registerForm.password.length >= 6 && 
             this.registerForm.confirmPassword === this.registerForm.password &&
             !this.usernameError && !this.passwordError && !this.confirmPasswordError
    },
    
    canNextStep2() {
      return this.isValidPhone(this.registerForm.phone) && 
             this.registerForm.verifyCode.length === 6
    },
    
    canRegister() {
      return this.canNextStep1 && this.canNextStep2 && this.agreedToTerms
    },
    
    canSendCode() {
      return this.isValidPhone(this.registerForm.phone) && this.verifyCountdown === 0
    },
    
    verifyBtnText() {
      return this.verifyCountdown > 0 ? `${this.verifyCountdown}s后重发` : '发送验证码'
    }
  },
  onUnload() {
    // 清除定时器
    if (this.verifyTimer) {
      clearInterval(this.verifyTimer)
    }
  },
  methods: {
    ...mapActions('user', ['register']),

    // 返回上一页
    goBack() {
      uni.navigateBack({
        fail: () => {
          uni.switchTab({
            url: '/pages/index/index'
          })
        }
      })
    },

    // 下一步
    nextStep() {
      if (this.currentStep < 3) {
        this.currentStep++
      }
    },

    // 上一步
    prevStep() {
      if (this.currentStep > 1) {
        this.currentStep--
      }
    },

    // 切换密码显示状态
    togglePasswordVisibility() {
      this.showPassword = !this.showPassword
    },

    // 选择用户类型
    selectUserType(type) {
      this.registerForm.userType = type
    },

    // 验证用户名
    validateUsername() {
      const username = this.registerForm.username
      if (username.length === 0) {
        this.usernameError = ''
      } else if (username.length < 3) {
        this.usernameError = '用户名至少3个字符'
      } else if (username.length > 20) {
        this.usernameError = '用户名最多20个字符'
      } else if (!/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(username)) {
        this.usernameError = '用户名只能包含字母、数字、下划线和中文'
      } else {
        this.usernameError = ''
      }
    },

    // 验证密码
    validatePassword() {
      const password = this.registerForm.password
      if (password.length === 0) {
        this.passwordError = ''
      } else if (password.length < 6) {
        this.passwordError = '密码至少6个字符'
      } else if (password.length > 20) {
        this.passwordError = '密码最多20个字符'
      } else {
        this.passwordError = ''
      }
      
      // 重新验证确认密码
      if (this.registerForm.confirmPassword) {
        this.validateConfirmPassword()
      }
    },

    // 验证确认密码
    validateConfirmPassword() {
      const confirmPassword = this.registerForm.confirmPassword
      if (confirmPassword.length === 0) {
        this.confirmPasswordError = ''
      } else if (confirmPassword !== this.registerForm.password) {
        this.confirmPasswordError = '两次输入的密码不一致'
      } else {
        this.confirmPasswordError = ''
      }
    },

    // 验证手机号
    validatePhone() {
      const phone = this.registerForm.phone
      if (phone.length === 0) {
        this.phoneError = ''
      } else if (!this.isValidPhone(phone)) {
        this.phoneError = '请输入正确的手机号'
      } else {
        this.phoneError = ''
      }
    },

    // 检查手机号格式
    isValidPhone(phone) {
      return /^1[3-9]\d{9}$/.test(phone)
    },

    // 发送验证码
    async sendVerifyCode() {
      if (!this.canSendCode) return

      try {
        // TODO: 调用发送验证码API
        // await api.post('/auth/send-verify-code', { phone: this.registerForm.phone })
        
        uni.showToast({
          title: '验证码已发送',
          icon: 'success'
        })

        // 开始倒计时
        this.startCountdown()
        
      } catch (error) {
        uni.showToast({
          title: error.message || '发送失败，请重试',
          icon: 'error'
        })
      }
    },

    // 开始倒计时
    startCountdown() {
      this.verifyCountdown = 60
      this.verifyTimer = setInterval(() => {
        this.verifyCountdown--
        if (this.verifyCountdown <= 0) {
          clearInterval(this.verifyTimer)
          this.verifyTimer = null
        }
      }, 1000)
    },

    // 切换协议同意状态
    toggleAgreement() {
      this.agreedToTerms = !this.agreedToTerms
    },

    // 显示用户协议
    showUserAgreement() {
      uni.showToast({
        title: '用户协议页面开发中',
        icon: 'none'
      })
    },

    // 显示隐私政策
    showPrivacyPolicy() {
      uni.showToast({
        title: '隐私政策页面开发中',
        icon: 'none'
      })
    },

    // 处理注册
    async handleRegister() {
      if (!this.canRegister || this.isLoading) return

      this.isLoading = true

      try {
        await this.register(this.registerForm)
        
        uni.showToast({
          title: '注册成功',
          icon: 'success'
        })

        // 延迟跳转到登录页
        setTimeout(() => {
          uni.redirectTo({
            url: '/pages/auth/login'
          })
        }, 1500)

      } catch (error) {
        uni.showToast({
          title: error.message || '注册失败，请重试',
          icon: 'error'
        })
        
        // 添加震动反馈
        uni.vibrateShort()
      } finally {
        this.isLoading = false
      }
    },

    // 跳转到登录页面
    goToLogin() {
      uni.navigateTo({
        url: '/pages/auth/login'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.register-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  
  /* 自定义导航栏 */
  .custom-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 88rpx;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10rpx);
    z-index: 999;
    
    .navbar-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
      padding: 0 32rpx;
      margin-top: var(--status-bar-height, 44rpx);
      
      .navbar-left {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .navbar-title {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
      }
      
      .navbar-right {
        width: 60rpx;
      }
    }
  }
  
  .register-container {
    padding-top: calc(88rpx + var(--status-bar-height, 44rpx) + 40rpx);
    padding-left: 40rpx;
    padding-right: 40rpx;
    padding-bottom: 40rpx;
    min-height: 100vh;
    
    .step-indicator {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 60rpx;
      
      .step-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .step-number {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.3);
          color: rgba(255, 255, 255, 0.6);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;
          font-weight: 600;
          margin-bottom: 12rpx;
          transition: all 0.3s ease;
        }
        
        .step-text {
          font-size: 24rpx;
          color: rgba(255, 255, 255, 0.6);
          transition: all 0.3s ease;
        }
        
        &.active {
          .step-number {
            background-color: #007AFF;
            color: #fff;
          }
          
          .step-text {
            color: #fff;
          }
        }
        
        &.completed {
          .step-number {
            background-color: #28a745;
            color: #fff;
          }
        }
      }
      
      .step-line {
        width: 100rpx;
        height: 4rpx;
        background-color: rgba(255, 255, 255, 0.3);
        margin: 0 20rpx;
        transition: all 0.3s ease;
        
        &.active {
          background-color: #007AFF;
        }
      }
    }
    
    .register-form {
      background-color: rgba(255, 255, 255, 0.95);
      border-radius: 24rpx;
      padding: 60rpx 40rpx;
      backdrop-filter: blur(10rpx);
      box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
      margin-bottom: 40rpx;
      
      .form-step {
        .step-title {
          font-size: 36rpx;
          font-weight: 600;
          color: #333;
          text-align: center;
          margin-bottom: 60rpx;
        }
        
        .input-group {
          margin-bottom: 40rpx;
          
          .input-item {
            display: flex;
            align-items: center;
            background-color: #f8f9fa;
            border: 2rpx solid #e9ecef;
            border-radius: 16rpx;
            padding: 20rpx 24rpx;
            transition: all 0.3s ease;
            
            &:focus-within {
              border-color: #007AFF;
              background-color: #fff;
              box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1);
            }
            
            .input-field {
              flex: 1;
              margin-left: 20rpx;
              font-size: 32rpx;
              color: #333;
              background: none;
              border: none;
              outline: none;
              
              &::placeholder {
                color: #adb5bd;
              }
            }
            
            .password-toggle, .verify-btn {
              margin-left: 20rpx;
              padding: 8rpx 16rpx;
              cursor: pointer;
            }
            
            .verify-btn {
              background-color: #007AFF;
              border-radius: 12rpx;
              
              &.disabled {
                background-color: #e9ecef;
                
                .verify-text {
                  color: #adb5bd;
                }
              }
              
              .verify-text {
                font-size: 24rpx;
                color: #fff;
              }
            }
          }
          
          .validation-tip {
            margin-top: 12rpx;
            padding-left: 24rpx;
            
            .error-text {
              font-size: 24rpx;
              color: #d32f2f;
            }
          }
        }
        
        .user-type-selection {
          margin-bottom: 40rpx;
          
          .selection-title {
            display: block;
            font-size: 28rpx;
            color: #333;
            margin-bottom: 24rpx;
          }
          
          .type-options {
            display: flex;
            gap: 32rpx;
            
            .type-option {
              flex: 1;
              display: flex;
              flex-direction: column;
              align-items: center;
              padding: 32rpx 20rpx;
              background-color: #f8f9fa;
              border: 2rpx solid #e9ecef;
              border-radius: 16rpx;
              transition: all 0.3s ease;
              
              &.active {
                border-color: #007AFF;
                background-color: #f0f9ff;
              }
              
              .type-text {
                margin-top: 12rpx;
                font-size: 28rpx;
                color: #333;
              }
            }
          }
        }
        
        .register-summary {
          background-color: #f8f9fa;
          border-radius: 16rpx;
          padding: 32rpx;
          margin-bottom: 40rpx;
          
          .summary-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20rpx;
            
            &:last-child {
              margin-bottom: 0;
            }
            
            .summary-label {
              font-size: 28rpx;
              color: #666;
            }
            
            .summary-value {
              font-size: 28rpx;
              color: #333;
              font-weight: 500;
            }
          }
        }
        
        .agreement-section {
          margin-bottom: 40rpx;
          
          .agreement-checkbox {
            display: flex;
            align-items: flex-start;
            
            .agreement-text {
              margin-left: 12rpx;
              font-size: 26rpx;
              color: #666;
              line-height: 1.5;
              
              .link-text {
                color: #007AFF;
              }
            }
          }
        }
        
        .next-btn, .register-btn {
          width: 100%;
          height: 96rpx;
          background: linear-gradient(135deg, #007AFF 0%, #5856d6 100%);
          border: none;
          border-radius: 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 8rpx 24rpx rgba(0, 122, 255, 0.3);
          transition: all 0.3s ease;
          
          &:active {
            transform: translateY(2rpx);
            box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
          }
          
          &.disabled {
            background: #e9ecef;
            box-shadow: none;
            
            .btn-text {
              color: #adb5bd;
            }
          }
          
          &.loading {
            background: #e9ecef;
          }
          
          .btn-text {
            margin-left: 12rpx;
            font-size: 32rpx;
            font-weight: 600;
            color: #fff;
          }
        }
        
        .step-actions {
          display: flex;
          gap: 24rpx;
          
          .prev-btn {
            flex: 1;
            height: 96rpx;
            background-color: #f8f9fa;
            border: 2rpx solid #e9ecef;
            border-radius: 20rpx;
            font-size: 32rpx;
            color: #666;
          }
          
          .next-btn, .register-btn {
            flex: 2;
          }
        }
      }
    }
    
    .login-link {
      text-align: center;
      
      .login-text {
        font-size: 28rpx;
        color: rgba(255, 255, 255, 0.8);
      }
      
      .login-btn {
        font-size: 28rpx;
        color: #fff;
        font-weight: 600;
        margin-left: 12rpx;
      }
    }
  }
}

/* 响应式适配 */
@media screen and (max-width: 375px) {
  .register-page .register-container {
    padding-left: 32rpx;
    padding-right: 32rpx;
    
    .register-form {
      padding: 40rpx 32rpx;
    }
  }
}
</style>